<template>
  <div class="shop-container">
    <!-- 页面标题 -->
    <h1 class="shop-title">数码商城</h1>

    <!-- Banner组件 -->
    <Banner />

    <div class="content-container">
      <!-- 左侧菜单 -->
      <div class="sidebar">
        <Menu @menu-change="changeComponent" />
      </div>

      <!-- 右侧内容区 - 动态组件 -->
      <div class="main-content">
        <component :is="myComponent" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { shallowRef } from "vue";
import Phone from "../components/项目四/Phone.vue";
import Laptop from "../components/项目四/Laptop.vue";
import Accessory from "../components/项目四/Accessory.vue";
import Banner from "../components/项目四/Banner.vue";
import Menu from "../components/项目四/Menu.vue";

// 使用shallowRef存储组件引用
const myComponent = shallowRef(Phone);

// 切换组件的方法
function changeComponent(idx) {
  if (idx === 1) {
    myComponent.value = Phone;
  } else if (idx === 2) {
    myComponent.value = Laptop;
  } else {
    myComponent.value = Accessory;
  }
}
</script>

<style scoped>
.shop-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.shop-title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.content-container {
  display: flex;
  margin-top: 20px;
  gap: 20px;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
}

.main-content {
  flex-grow: 1;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  min-height: 400px;
}
</style>
